<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<style type="text/css">
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<ul id="list" class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/accordion.html">
						accordion（折叠面板）
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/ajax.html">
						ajax（网络请求）
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/badges.html">
						badge（数字角标）
					</a>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						button（按钮）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/buttons.html">
								普通按钮
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/buttons-with-icons.html">
								带图标的按钮
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/buttons-with-badges.html">
								带数字的按钮
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/buttons-with-block.html">
								块级按钮
							</a>
						</li>
						<!--<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/buttons-with-fabs.html">
								浮动控制按钮
							</a>
						</li>-->
					</ul>

				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/checkbox.html">
						checkbox（复选框）
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/dialog.html">
						dialog（消息框）
					</a>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						gallery slider（图片轮播）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/slider-default.html">
								默认样式

							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/slider-with-title.html">
								下方悬浮标题

							</a>
						</li>
					</ul>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						gallery table（图文表格）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/slider-table-default.html">
								默认样式
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/slider-table-pagination.html">
								左右滑动分页样式
							</a>
						</li>
					</ul>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						grid（9宫格）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/grid-default.html">
								默认样式
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/grid-pagination.html">
								左右滑动分页样式
							</a>
						</li>
						<!--<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/oa-grid.html">
								高度自适应示例
							</a>
						</li>-->
					</ul>
				</li>

				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/icons.html">
						icon（图标）
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/inputs.html">
						input（输入框）
					</a>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						list（列表）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tableviews.html">
								默认样式
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tableviews-with-chevrons.html">
								右侧带导航箭头
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tableviews-with-badges.html">
								右侧带数字角标
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tableviews-with-badges-and-chevrons.html">
								右侧同时带箭头和数字角标
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/list-with-input.html">
								列表带input类控件
							</a>
						</li>
						<!--<li class="mui-table-view-cell">
						<a class="mui-navigate-right" href="examples/tableviews-with-switches.html">
						右侧带开关
						</a>
						</li>-->
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/list-triplex-row.html">
								三行列表
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tableview-image-left.html">
								图文列表（缩略图居左）
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tableview-image-right.html">
								图文列表（缩略图居右）
							</a>
						</li>

						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tableview-with-images-and-chevrons.html">
								图文列表（左缩略图+右箭头）
							</a>
						</li>

						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tableviews-with-collapses.html">
								二级列表
							</a>
						</li>

						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tableviews-with-swipe.html">
								滑动触发列表项菜单
							</a>
						</li>
						<!--<li class="mui-table-view-cell">
						<a class="mui-navigate-right" href="examples/cards.html">
						Carded table views
						</a>
						</li>-->

					</ul>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						nav bar（导航栏）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/titlebar.html">
								默认样式
							</a>
						</li>
						<!--<li class="mui-table-view-cell">
						<a class="mui-navigate-right" href="examples/titlebar-with-search.html">
						（待确认）导航条包含搜索框
						</a>
						</li>-->
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/titlebar-with-buttons.html">
								导航条包含按钮
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/titlebar-with-icons.html">
								导航条包含ICON
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/titlebar-with-text-and-icons.html">
								导航条同时包含文字和图标
							</a>
						</li>
						<!--<li class="mui-table-view-cell"><a class="mui-navigate-right" href="examples/titlebar-with-webview-and-5+.html">Title bar with 5+(webview)</a></li>-->
						<!--<li class="mui-table-view-cell">
						<a class="mui-navigate-right" href="examples/titlebar-with-html5-and-5+.html">
						5+创建的导航条
						</a>
						</li>-->
					</ul>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						off canvas（侧滑导航）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/offcanvas-left-plus-main.html">
								右滑菜单
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/offcanvas-right-plus-main.html">
								左滑菜单
							</a>
						</li>
						<li class="mui-table-view-cell ios-only">
							<a class="mui-navigate-right" href="examples/offcanvas-with-left.html">
								可拖动式右滑菜单
							</a>
						</li>
						<li class="mui-table-view-cell ios-only">
							<a class="mui-navigate-right" href="examples/offcanvas-with-right.html">
								可拖动式左滑菜单
							</a>
						</li>
					</ul>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/pagination.html">
						pagination（分页）
					</a>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="">
						popover（弹出菜单）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/popovers.html">
								popover
							</a>
						</li>
						<!--<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/popovers-with-js-call.html">

								popover with js call

							</a>
						</li>-->
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/popovers-with-actionsheet.html">
								popover with action sheet
							</a>
						</li>
						<!--<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/popovers-with-cross-webviews.html">
								Popovers with cross webviews
							</a>
						</li>-->
					</ul>
				</li>
				<li class="mui-table-view-cell mui-collapse" id="pull-refresh-h5">
					<a class="mui-navigate-right" href="#">
						pull to refresh（下拉刷新）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell ">
							<a class="mui-navigate-right" href="examples/pullrefresh-down-main.html">
								下拉刷新
							</a>
						</li>
						<li class="mui-table-view-cell ">
							<a class="mui-navigate-right" href="examples/pullup.html">
								上拉加载
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/pullrefresh-main.html">
								同时支持下拉和上拉
							</a>
						</li>
					</ul>
				</li>
				<li class="mui-table-view-cell mui-collapse" id="pull-refresh-pandora">
					<a class="mui-navigate-right" href="#">
						pull to refresh（下拉刷新）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/pullrefresh-down-main.html">
								下拉刷新默认样式
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/pulldown-with-plus-main-custom.html">
								下拉刷新自定义样式
							</a>
						</li>
						<li class="mui-table-view-cell ">
							<a class="mui-navigate-right" href="examples/pullup.html">
								上拉加载
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/pullrefresh-main.html">
								同时支持下拉和上拉
							</a>
						</li>
					</ul>
				</li>

				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/radio.html">
						radio（单选框）
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/range.html">
						range（滑块）
					</a>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						segment（分段选择）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tab-with-segmented-control.html">
								按钮式选项卡
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tab-with-viewpagerindicator.html">
								可拖动选项卡(仿Android)
							</a>
						</li>
					</ul>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/switches.html">
						switch（开关）
					</a>
				</li>



				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						tab bar（选项卡）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tabbar.html">
								div模式
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tab-webview-main.html">
								webview模式
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tabbar-labels-only.html">
								文字选项卡
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tabbar-with-submenus.html">
								含二级菜单的选项卡
							</a>
						</li>
					</ul>
				</li>

				<!--<li class="mui-table-view-cell mui-collapse">
				<a class="mui-navigate-right" href="#">
				表单（Forms）
				</a>
				<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell">
				<a class="mui-navigate-right" href="examples/forms.html">
				Form
				</a>
				</li>
				<li class="mui-table-view-cell">
				<a class="mui-navigate-right" href="examples/forms-with-group.html">
				Form with input group
				</a>
				</li>
				<li class="mui-table-view-cell">
				<a class="mui-navigate-right" href="examples/forms-with-group-and-labels.html">
				Form with input group and labels
				</a>
				</li>
				</ul>
				</li>-->

				<!--<li class="mui-table-view-cell">
				<a class="mui-navigate-right" href="examples/modals.html">
				弹出窗口（Modals）
				</a>
				</li>-->


				<!--<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/preload.html">

				预加载（Preload）

				</a>
				</li>-->
				<!--<li class="mui-table-view-cell mui-collapse">
				<a class="mui-navigate-right" href="#">
				OA模板
				</a>
				<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell">
				<a class="mui-navigate-right" href="examples/oa-missives-detail.html">
				待办公文详情
				</a>
				</li>
				<li class="mui-table-view-cell">
				<a class="mui-navigate-right" href="examples/oa-contact-main.html">
				通讯录
				</a>
				</li>
				</ul>
				</li>-->
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/typography.html">
						typography（文字）
					</a>
				</li>
				<!--<li class="mui-table-view-cell">
				<a class="mui-navigate-right" href="examples/iscroll.html">
				iscroll 4
				</a>
				</li>
				<li class="mui-table-view-cell">
				<a class="mui-navigate-right" href="examples/speech.html">
				语音助手
				</a>
				</li>-->
				<!--<li class="mui-table-view-cell">
				<a class="mui-navigate-right" href="examples/demo.html">
				预加载(模板)
				</a>
				</li>-->
				<!--<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/scroll.html">
						scroll（区域滚动）
					</a>
				</li>-->
			</ul>
		</div>
		<script>
			var limit = 3,
				count = 0;
			mui.init({
				preloadLimit: limit, //同时并存的预加载窗口数量
				swipeBack: false,
			});
			(function($) {
				$.plusReady(function() {
					//初始化一级列表的预加载
					$('#list>.mui-table-view-cell', document.body).each(function() {
						//只预加载一级列表，二级列表在其展开时再预加载；
						if (!this.classList.contains('mui-collapse')) {
							var url = this.querySelector('a').getAttribute("href");
							//预加载，默认使用url作为其id
							$.preload({
								url: url,
							});
							if (++count >= limit) {
								return false;
							}
						}
					});

					//监听展开事件,预加载二级列表的前几个；
					$('#list').on('expand', '.mui-collapse', function(e) {
						count = 0;
						$('.mui-table-view a', this).each(function() {
							var url = this.getAttribute("href");
							if (~url.indexOf('.html')) {
								//单独处理侧滑导航的index
								if (~url.indexOf('offcanvas-')) {
									$.preload({
										url: url,
										styles: {
											zindex: 9999
										},
									});
								} else {
									$.preload({
										url: url,
									});
								}
								if (++count >= limit) {
									return false;
								}
							}
						});
					});

					// 关闭启动界面
					plus.navigator.closeSplashscreen();
					//下拉刷新两个平台有区别；
					if ($.os.ios) {
						document.getElementById('pull-refresh-pandora').style.display = "none";
					} else if ($.os.android) {
						document.getElementById('pull-refresh-h5').style.display = "none";
						var list = document.querySelectorAll('.ios-only');
						if (list) {
							for (var i = 0; i < list.length; i++) {
								list[i].style.display = 'none';
							}
						}
					}
				});

				/**
				 * 处理链接点击事件
				 */
				$.ready(function() {
					$('body').on('tap', 'a', function(e) {
						var id = this.getAttribute('href');
						if (id) {
							if (~id.indexOf('.html')) {
								if (window.plus) {
									//侧滑导航涉及Index问题，需要单独处理；
									if (~id.indexOf('offcanvas-')) {
										$.openWindow({
											id: id,
											url: this.href,
											styles: {
												zindex: 9999
											},
											preload: true
										});
									} else {
										$.openWindow({
											id: id,
											url: this.href,
											preload: true
										});
									}
								} else {
									document.location.href = this.href;
								}
							} else {
								if (typeof plus !== 'undefined') {
									plus.runtime.openURL(id);
								}
							}
						}
					});
				});
			})(mui);
		</script>
	</body>

</html>
